<template>
    <div class="sys-home">
        <div class="hello">
            <el-card class="box-card">
                您好， {{ userInfo.username }} ！欢迎使用本系统
            </el-card>
        </div>
        <div class="content">
            <el-card class="box-card">
                <div slot="header" class="clearfix">
                    <span class="title">公告列表</span>
                </div>
                <div class="timeline">
                    <el-timeline :reverse="reverse">
                        <el-timeline-item v-for="activity in activities" :key="activity.id" :timestamp="activity.createdDt">
                            {{ activity.title }}
                        </el-timeline-item>
                    </el-timeline>
                </div>
            </el-card>
        </div>
    </div>
</template>
<script>
import { mapState } from 'vuex';
export default {
    name: 'SysHome',
    components: {

    },
    mixins: [],
    props: {

    },
    data() {
        return {
            reverse: false,
            activities: [],
        }
    },
    computed: {
        // timestamp() {
        //     return
        // }
        ...mapState('userStore', ['userInfo'])
    },
    watch: {

    },
    created() {

    },
    mounted() {
        this.getSysHomeData()
        // this.getRoleMenu()

    },
    methods: {
        getSysHomeData() {
            this.request.post('/notice/selectNoticePage', {}).then(res => {
                if (res.code == 20000) {
                    res.data.list.forEach(item => {
                        if (item.createdDt) {
                            item.createdDt = item.createdDt.substring(0, 10)
                        }
                    });
                    this.activities = res.data.list
                }
            })
        }

    }
};
</script>
<style lang='less' scoped>
.sys-home {
    .el-card {
        margin-bottom: 10px;
        font-size: 14px;
        padding: 6px 0;
    }

    .content {
        width: 50%;
        height: 300px;

        .box-card {
            .title {
                font-size: 20px;
                font-weight: 700;
            }
        }

        .timeline {
            padding-top: 20px;
        }
    }
}
</style>